<template>
	<view class="home-wrapper">
		<user-header :level="0"><template #right></template></user-header>

		<view style="padding: 0 20rpx; margin-top: -36rpx;">
			<statistics-card :level1="homeState.FirstDealerCount" :level2="homeState.DoubleDealerCount" :level3="homeState.DoorDealerCount"></statistics-card>

			<template v-if="homeState.PhotoList.length > 0">
				<u-gap :height="20"></u-gap>
				<u-swiper :height="200" :list="homeState.PhotoList"></u-swiper>
			</template>

			<u-gap :height="40"></u-gap>

			<u-divider :half-width="60" :fontSize="32" style="font-weight: bold;" bg-color="#f5f5f5" color="#858585">基础信息</u-divider>

			<u-gap :height="60"></u-gap>

			<view class="u-flex section-item">
				<view class="left u-flex-col u-col-center">
					<view class="circle"><u-image src="@/static/images/home/home-1.png" :height="70" :width="70"></u-image></view>
					<text class="label">基础信息</text>
				</view>
				<view class="right u-flex-1 u-m-l-10">
					<u-grid :col="3" :border="false">
						<u-grid-item :custom-style="customStyle">
							<view class="u-flex-col  u-col-center" style="height: 180rpx;" @tap="apply('information')">
								<u-image src="@/static/images/home/item-0.png" :height="90" :width="90"></u-image>
								<text class="u-font-26 u-text-center u-text-center u-m-t-20" style="color: #858585">信息维护</text>
							</view>
						</u-grid-item>
						<u-grid-item :custom-style="customStyle">
							<view class="u-flex-col  u-col-center" style="height: 180rpx;" @tap="apply('storePhoto')">
								<u-image src="@/static/images/home/item-1.png" :height="90" :width="90"></u-image>
								<text class="u-font-26 u-text-center u-text-center u-m-t-20" style="color: #858585">门店照片维护</text>
							</view>
						</u-grid-item>
						<u-grid-item :custom-style="customStyle">
							<view class="u-flex-col  u-col-center" style="height: 180rpx;" @tap="$u.route('/pages/home/dealer/index')">
								<u-image src="@/static/images/home/item-0.png" :height="90" :width="90"></u-image>
								<text class="u-font-26 u-text-center u-text-center u-m-t-20" style="color: #858585">我的客户</text>
							</view>
						</u-grid-item>
						<u-grid-item :custom-style="customStyle">
							<view class="u-flex-col  u-col-center" style="height: 180rpx;" @tap="toList('information')">
								<u-image src="@/static/images/home/item-1.png" :height="90" :width="90"></u-image>
								<text class="u-font-26 u-text-center u-text-center u-m-t-20" style="color: #858585">信息审核</text>
							</view>
						</u-grid-item>
						<u-grid-item :custom-style="customStyle">
							<view class="u-flex-col  u-col-center" style="height: 180rpx;" @tap="toList('storePhotoReview')">
								<u-image src="@/static/images/home/item-1.png" :height="90" :width="90"></u-image>
								<text class="u-font-26 u-text-center u-text-center u-m-t-20" style="color: #858585">门店照片审核</text>
							</view>
						</u-grid-item>
						<u-grid-item :custom-style="customStyle">
							<view class="u-flex-col  u-col-center" style="height: 180rpx;" @tap="toList('change')">
								<u-image src="@/static/images/home/item-0.png" :height="90" :width="90"></u-image>
								<text class="u-font-26 u-text-center u-text-center u-m-t-20" style="color: #858585">渠道信息调整</text>
							</view>
						</u-grid-item>
					</u-grid>
				</view>
			</view>

			<u-gap :height="40"></u-gap>
			<u-divider :half-width="60" :fontSize="32" style="font-weight: bold;" bg-color="#f5f5f5" color="#858585">市场支持</u-divider>
			<u-gap :height="60"></u-gap>
			<view class="u-flex section-item">
				<view class="left u-flex-col u-col-center">
					<view class="circle"><u-image src="@/static/images/home/home-1.png" :height="70" :width="70"></u-image></view>
					<text class="label">模板样机</text>
				</view>
				<view class="right u-flex-1 u-m-l-10">
					<u-grid :col="3" :border="false">
						<u-grid-item :custom-style="customStyle">
							<view class="u-flex-col  u-col-center" style="height: 180rpx;" @tap="apply('module')">
								<u-image src="@/static/images/home/item-0.png" :height="90" :width="90"></u-image>
								<text class="u-font-26 u-text-center u-text-center u-m-t-20" style="color: #858585">模块样机申请</text>
							</view>
						</u-grid-item>
						<u-grid-item :custom-style="customStyle">
							<view class="u-flex-col  u-col-center" style="height: 180rpx;" @tap="toList('module')">
								<u-image src="@/static/images/home/item-1.png" :height="90" :width="90"></u-image>
								<text class="u-font-26 u-text-center u-text-center u-m-t-20" style="color: #858585">模块样机审核</text>
							</view>
						</u-grid-item>
						<u-grid-item :custom-style="customStyle">
							<view class="u-flex-col  u-col-center" style="height: 180rpx;" @tap="toList('moduleAcceptance')">
								<u-image src="@/static/images/home/item-2.png" :height="90" :width="90"></u-image>
								<text class="u-font-26 u-text-center u-text-center u-m-t-20" style="color: #858585">模板样机验收列表</text>
							</view>
						</u-grid-item>
					</u-grid>
				</view>
			</view>

			<u-gap :height="80"></u-gap>

			<view class="u-flex section-item">
				<view class="left u-flex-col u-col-center">
					<view class="circle"><u-image src="@/static/images/home/home-2.png" :height="70" :width="70"></u-image></view>
					<text class="label">户外套装</text>
				</view>
				<view class="right u-flex-1 u-m-l-10">
					<u-grid :col="3" :border="false">
						<u-grid-item :custom-style="customStyle">
							<view class="u-flex-col u-row-center u-col-center" @tap="apply('outdoor')">
								<u-image src="@/static/images/home/item-3.png" :height="90" :width="90"></u-image>
								<text class="u-font-26 u-m-t-20" style="color: #858585">户外申请</text>
							</view>
						</u-grid-item>
						<u-grid-item :custom-style="customStyle">
							<view class="u-flex-col u-row-center u-col-center" @tap="toList('outdoor')">
								<u-image src="@/static/images/home/item-4.png" :height="90" :width="90"></u-image>
								<text class="u-font-26 u-m-t-20" style="color: #858585">户外审核</text>
							</view>
						</u-grid-item>
						<u-grid-item :custom-style="customStyle">
							<view class="u-flex-col u-row-center u-col-center" @tap="toList('outdoorAcceptance')">
								<u-image src="@/static/images/home/item-6.png" :height="90" :width="90"></u-image>
								<text class="u-font-26 u-m-t-20" style="color: #858585">户外验收列表</text>
							</view>
						</u-grid-item>
					</u-grid>
				</view>
			</view>

			<u-gap :height="80"></u-gap>

			<view class="u-flex section-item">
				<view class="left u-flex-col u-col-center">
					<view class="circle"><u-image src="@/static/images/home/home-3.png" :height="70" :width="70"></u-image></view>
					<text class="label">奖牌申请</text>
				</view>
				<view class="right u-flex-1 u-m-l-10">
					<u-grid :col="3" :border="false">
						<u-grid-item :custom-style="customStyle">
							<view class="u-flex-col u-row-center u-col-center" @tap="apply('medals')">
								<u-image src="@/static/images/home/item-7.png" :height="90" :width="90"></u-image>
								<text class="u-font-26 u-m-t-20" style="color: #858585">奖牌申请</text>
							</view>
						</u-grid-item>
						<u-grid-item :custom-style="customStyle">
							<view class="u-flex-col u-row-center u-col-center" @tap="toList('medals')">
								<u-image src="@/static/images/home/item-8.png" :height="90" :width="90"></u-image>
								<text class="u-font-26 u-m-t-20" style="color: #858585">奖牌审核</text>
							</view>
						</u-grid-item>
						<u-grid-item :custom-style="customStyle">
							<view class="u-flex-col u-row-center u-col-center" @tap="toList('medalsAcceptance')">
								<u-image src="@/static/images/home/item-9.png" :height="90" :width="90"></u-image>
								<text class="u-font-26 u-m-t-20" style="color: #858585">奖牌验收验收</text>
							</view>
						</u-grid-item>
					</u-grid>
				</view>
			</view>

			<u-gap :height="80"></u-gap>

			<view class="u-flex section-item u-p-b-20">
				<view class="left u-flex-col u-col-center u-row-left">
					<view class="circle"><u-image src="@/static/images/home/home-4.png" :height="70" :width="70"></u-image></view>
					<text class="label">设计及费用</text>
				</view>
				<view class="right u-flex-1 u-m-l-10">
					<u-grid :col="3" :border="false">
						<u-grid-item :custom-style="customStyle">
							<view class="u-flex-col u-col-center" style="height: 180rpx;" @tap="apply('doorDesign')">
								<u-image src="@/static/images/home/item-10.png" :height="90" :width="90"></u-image>
								<text class="u-font-26 u-m-t-20 u-text-center" style="color: #858585">门头设计申请</text>
							</view>
						</u-grid-item>
						<u-grid-item :custom-style="customStyle">
							<view class="u-flex-col u-col-center" style="height: 180rpx;" @tap="apply('storeDesign')">
								<u-image src="@/static/images/home/item-10.png" :height="90" :width="90"></u-image>
								<text class="u-font-26 u-m-t-20 u-text-center" style="color: #858585">专卖店设计申请</text>
							</view>
						</u-grid-item>
						<u-grid-item :custom-style="customStyle">
							<view class="u-flex-col u-col-center" style="height: 180rpx;" @tap="apply('otherDesign')">
								<u-image src="@/static/images/home/item-10.png" :height="90" :width="90"></u-image>
								<text class="u-font-26 u-m-t-20 u-text-center" style="color: #858585">其他设计申请</text>
							</view>
						</u-grid-item>
						<u-grid-item :custom-style="customStyle">
							<view class="u-flex-col  u-col-center" style="height: 180rpx;" @tap="toList('design')">
								<u-image src="@/static/images/home/item-11.png" :height="90" :width="90"></u-image>
								<text class="u-font-26 u-m-t-20" style="color: #858585">设计审核</text>
							</view>
						</u-grid-item>
						<u-grid-item :custom-style="customStyle">
							<view class="u-flex-col  u-col-center" style="height: 180rpx;" @tap="apply('doorCosts')">
								<u-image src="@/static/images/home/item-12.png" :height="90" :width="90"></u-image>
								<text class="u-font-26 u-m-t-20 u-text-center" style="color: #858585">门头费用申请</text>
							</view>
						</u-grid-item>
						<u-grid-item :custom-style="customStyle">
							<view class="u-flex-col  u-col-center" style="height: 180rpx;" @tap="apply('storeCosts')">
								<u-image src="@/static/images/home/item-12.png" :height="90" :width="90"></u-image>
								<text class="u-font-26 u-m-t-20 u-text-center" style="color: #858585">专卖店费用申请</text>
							</view>
						</u-grid-item>
						<u-grid-item :custom-style="customStyle">
							<view class="u-flex-col  u-col-center" style="height: 180rpx;" @tap="toList('otherDesignAcceptance')">
								<u-image src="@/static/images/home/item-13.png" :height="90" :width="90"></u-image>
								<text class="u-font-26 u-m-t-20 u-text-center" style="color: #858585">其他设计验收审核</text>
							</view>
						</u-grid-item>
						<u-grid-item :custom-style="customStyle">
							<view class="u-flex-col u-col-center" style="height: 180rpx;" @tap="toList('doorCosts')">
								<u-image src="@/static/images/home/item-14.png" :height="90" :width="90"></u-image>
								<text class="u-font-26 u-m-t-20" style="color: #858585">门头费用审核</text>
							</view>
						</u-grid-item>
						<u-grid-item :custom-style="customStyle">
							<view class="u-flex-col u-col-center" style="height: 180rpx;" @tap="toList('storeCosts')">
								<u-image src="@/static/images/home/item-15.png" :height="90" :width="90"></u-image>
								<text class="u-font-26 u-m-t-20 u-text-center" style="color: #858585">专卖店费用审核</text>
							</view>
						</u-grid-item>
						<u-grid-item :custom-style="customStyle">
							<view class="u-flex-col  u-col-center" style="height: 180rpx;" @tap="toList('doorAgreement')">
								<u-image src="@/static/images/home/item-16.png" :height="90" :width="90"></u-image>
								<text class="u-font-26 u-m-t-20 u-text-center" style="color: #858585">门头协议验收审核</text>
							</view>
						</u-grid-item>
						<u-grid-item :custom-style="customStyle">
							<view class="u-flex-col u-col-center " style="height: 180rpx;" @tap="toList('storeAgreement')">
								<u-image src="@/static/images/home/item-17.png" :height="90" :width="90"></u-image>
								<text class="u-font-26 u-text-center u-m-t-20" style="color: #858585">专卖店协议验收审核</text>
							</view>
						</u-grid-item>
					</u-grid>
				</view>
			</view>
		</view>

		<u-modal
			title="申请"
			width="90%"
			:showLoading="false"
			:mask-close-able="true"
			v-model="showApplyModal"
			cancel-text="取消"
			:show-cancel-button="true"
			@confirm="toApplyPage"
			:async-close="true"
			confirm-text="确定"
			:negative-top="100"
		>
			<!-- <apply-search ref="applySearch" :storeRequired="storeRequired" :showDouble="showApplyDouble" :showStore="showApplyStore"></apply-search> -->
			<u-form label-position="top" :label-width="200" style="padding: 0rpx 40rpx;">
				<u-form-item label="一级经销商" required>
					<u-input :value="FirstDealer && FirstDealer.label" inputAlign="left" type="select" :selectOpen="showFirstDealerPicker" @tap="showFirstDealerPicker = true"></u-input>
				</u-form-item>
				<u-form-item v-if="showApplyDouble || showApplyStore" label="二级经销商">
					<u-input :value="DoubleDealer && DoubleDealer.label" inputAlign="left" type="select" :selectOpen="showDoubleDealerPicker" @tap="showDoubleDealerPicker = true"></u-input>
				</u-form-item>
				<u-form-item v-if="showApplyStore" label="门店" :required="storeRequired">
					<u-input :value="StoreDealer && StoreDealer.label" inputAlign="left" type="select" :selectOpen="showStoreDealerPicker" @tap="showStoreDealerPicker = true"></u-input>
				</u-form-item>
			</u-form>
		</u-modal>

		<u-select
			@confirm="onPickerChange($event, 1)"
			:default-value="[FirstDealerIndex]"
			v-model="showFirstDealerPicker"
			:list="FirstDealerList"
			label-name="Value"
			value-name="Key"
			safe-area-inset-bottom
		></u-select>
		<u-select
			v-if="showApplyDouble || showApplyStore"
			@confirm="onPickerChange($event, 2)"
			:default-value="[DoubleDealerIndex]"
			v-model="showDoubleDealerPicker"
			:list="DoubleDealerList"
			label-name="Value"
			value-name="Key"
			safe-area-inset-bottom
		></u-select>
		<u-select
			v-if="showApplyStore"
			@confirm="onPickerChange($event, 3)"
			:default-value="[StoreDealerIndex]"
			v-model="showStoreDealerPicker"
			:list="StoreDealerList"
			label-name="Value"
			value-name="Key"
			safe-area-inset-bottom
		></u-select>
	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			homeState: {
				PhotoList: [],
				FirstDealerCount: 0,
				DoubleDealerCount: 0,
				DoorDealerCount: 0
			},
			customStyle: {
				padding: '30rpx 10rpx 0 10rpx'
			},

			showApplyModal: false,
			showApplyDouble: true,
			showApplyStore: true,
			applyType: '',

			showFirstDealerPicker: false,
			showDoubleDealerPicker: false,
			showStoreDealerPicker: false,

			FirstDealerList: [],
			FirstDealerIndex: -1,
			FirstDealer: {},

			DoubleDealerList: [],
			DoubleDealerIndex: -1,
			DoubleDealer: {},

			StoreDealerList: [],
			StoreDealerIndex: -1,
			StoreDealer: {},

			storeRequired: true,

			params: {
				FirstDealerId: null,
				DoubleDealerId: null,
				StoreDealerId: null
			}
		};
	},

	created() {
		this.$u.api.getHomeData().then(res => {
			console.log(res);
			const { ResultCode, DoorDealerCount, DoubleDealerCount, FirstDealerCount, PhotoList } = res;

			this.homeState.PhotoList = PhotoList.map(item => {
				return {
					image: this.$getImageUrl(item.Value),
					title: item.Key
				};
			});
			this.homeState.FirstDealerCount = FirstDealerCount;
			this.homeState.DoubleDealerCount = DoubleDealerCount;
			this.homeState.DoorDealerCount = DoorDealerCount;
		});
	},

	onLoad(options) {
		let vuex_user = this.vuex_user;
		if (options.OpenId) {
			vuex_user.OpenId = options.OpenId;
		}
		if (options.HeadPic) {
			vuex_user.HeadPic = options.HeadPic;
		}
		this.$u.vuex('vuex_user', vuex_user);

		this.getFirstDealerList();
	},

	methods: {
		apply(type) {
			this.applyType = type;
			this.showApplyModal = true;

			if (type == 'module') {
				this.showApplyDouble = true;
				this.showApplyStore = true;
				this.storeRequired = true;
			}

			if (type == 'outdoor') {
				this.showApplyDouble = true;
				this.showApplyStore = false;
			}

			if (type == 'medals') {
				this.showApplyDouble = true;
				this.showApplyStore = true;
				this.storeRequired = true;
			}

			if (type == 'otherDesign') {
				this.showApplyDouble = true;
				this.showApplyStore = true;
				this.storeRequired = false;
			}

			if (type == 'doorDesign' || type == 'storeDesign' || type == 'doorCosts' || type == 'storeCosts') {
				this.showApplyDouble = true;
				this.showApplyStore = true;
				this.storeRequired = true;
			}

			if (type == 'information') {
				this.showApplyDouble = true;
				this.showApplyStore = true;
				this.storeRequired = false;
			}

			if (type == 'storePhoto') {
				this.showApplyDouble = true;
				this.showApplyStore = true;
				this.storeRequired = true;
			}
		},

		toApplyPage() {
			let dealerId = this.params.FirstDealerId;

			if (!dealerId) {
				this.$u.toast('请选择一级经销商');
				return false;
			}

			if (this.showApplyDouble) {
				if (this.params.DoubleDealerId) {
					dealerId = this.params.DoubleDealerId;
				}
			}

			if (this.showApplyStore) {
				if (this.storeRequired) {
					if (!this.params.DoubleDealerId) {
						this.$u.toast('请选择二级经销商');
						return false;
					}

					if (!this.params.StoreDealerId) {
						this.$u.toast('请选择门店');
						return false;
					}
				}

				if (this.params.StoreDealerId) {
					dealerId = this.params.StoreDealerId;
				}
			}

			let url;

			let params = {
				DealerId: dealerId
			};

			if (this.applyType == 'module') {
				this.checkModuleApplyIsOk(dealerId, 1).then(res => {
					if (res) {
						url = '/pages/apply/module/index';
						this.$u.route({
							url: url,
							params: params
						});
					}
				});
			}

			if (this.applyType == 'outdoor') {
				this.checkModuleApplyIsOk(dealerId, 4).then(res => {
					if (res) {
						url = '/pages/apply/outdoor/index';
						this.$u.route({
							url: url,
							params: params
						});
					}
				});
			}

			if (this.applyType == 'medals') {
				this.checkModuleApplyIsOk(dealerId, 5).then(res => {
					if (res) {
						url = '/pages/apply/medals/index';
						this.$u.route({
							url: url,
							params: params
						});
					}
				});
			}

			if (this.applyType == 'otherDesign') {
				url = '/pages/apply/design/index';
				params.SelectType = 3;
				this.$u.route({
					url: url,
					params: params
				});
			}

			if (this.applyType == 'doorDesign') {
				url = '/pages/apply/design/index';
				params.SelectType = 1;
				this.$u.route({
					url: url,
					params: params
				});
			}

			if (this.applyType == 'storeDesign') {
				url = '/pages/apply/design/index';
				params.SelectType = 2;
				this.$u.route({
					url: url,
					params: params
				});
			}

			if (this.applyType == 'doorCosts') {
				url = '/pages/apply/doorCosts/index';
				this.$u.route({
					url,
					params
				});
			}

			if (this.applyType == 'storeCosts') {
				url = '/pages/apply/storeCosts/index';
				this.$u.route({
					url,
					params
				});
			}

			if (this.applyType == 'information') {
				url = '/pages/apply/information/index';
				this.$u.route({
					url,
					params
				});
			}

			if (this.applyType == 'storePhoto') {
				url = '/pages/apply/information/storePhoto';
				this.$u.route({
					url,
					params
				});
			}

			this.showApplyModal = false;
			this.resetSearch();
		},

		checkModuleApplyIsOk(dealerId, selectType) {
			return new Promise((reslove, reject) => {
				this.$u.api
					.moduleApplyCheck({
						SelectType: selectType,
						DealerId: dealerId
					})
					.then(res => {
						const { ResultCode } = res;
						if (ResultCode === 1) {
							reslove(true);
						}
					});
			});
		},

		toList(type) {
			let url, params;

			if (type == 'module') {
				url = '/pages/review/module/index';
			}

			if (type == 'moduleAcceptance') {
				url = '/pages/review/module/acceptance';
			}

			if (type == 'information') {
				url = '/pages/review/information/index';
				params = {
					SelectType: 1
				};
			}
			
			if (type == 'storePhotoReview') {
				url = '/pages/review/information/index';
				params = {
					SelectType: 2
				};
			}

			if (type == 'change') {
				url = '/pages/review/change/index';
			}

			if (type == 'outdoor') {
				url = '/pages/review/outdoor/index';
			}

			if (type == 'outdoorAcceptance') {
				url = '/pages/review/outdoor/acceptance';
			}

			if (type == 'medals') {
				url = '/pages/review/medals/index';
			}

			if (type == 'medalsAcceptance') {
				url = '/pages/review/medals/acceptance';
			}

			if (type == 'doorCosts') {
				url = '/pages/review/doorCosts/index';
			}

			if (type == 'storeCosts') {
				url = '/pages/review/storeCosts/index';
			}

			if (type == 'design') {
				url = '/pages/review/design/index';
			}

			if (type == 'otherDesignAcceptance') {
				url = '/pages/review/agreement/index';
				params = {
					SelectType: 3
				};
			}

			if (type == 'doorAgreement') {
				(url = '/pages/review/agreement/index'),
					(params = {
						SelectType: 1
					});
			}

			if (type == 'storeAgreement') {
				url = '/pages/review/agreement/index';
				params = {
					SelectType: 2
				};
			}

			this.$u.route({
				url,
				params
			});
		},

		onPickerChange(e, level) {
			let dealerList = [];
			let dealer = {};
			let dealerIndex = -1;
			if (level == 1) {
				dealerList = this.FirstDealerList;
				dealer = this.FirstDealer;
				dealerIndex = this.FirstDealerIndex;
			} else if (level == 2) {
				dealerList = this.DoubleDealerList;
				dealer = this.DoubleDealer;
				dealerIndex = this.DoubleDealerIndex;
			} else if (level == 3) {
				dealerList = this.StoreDealerList;
				dealer = this.StoreDealer;
				dealerIndex = this.StoreDealerIndex;
			}

			if (!e[0].value || !e[0].label) {
				if (dealerList.length > 0) {
					dealer.value = dealerList[0].Key;
					dealer.label = dealerList[0].Value;
				} else {
					return false;
				}
			} else {
				dealer = e[0];
			}

			dealerIndex = dealerList.findIndex(item => item.Key == dealer.value);

			if (level == 1) {
				this.FirstDealer = dealer;
				this.FirstDealerIndex = dealerIndex;
				this.params.FirstDealerId = dealer.value;

				if (this.showApplyStore || this.showApplyDouble) {
					this.initDoubleDealer(dealer);
					this.StoreDealer = {};
					this.StoreDealerIndex = -1;
					this.StoreDealerList = [];
				}
			} else if (level == 2) {
				this.DoubleDealer = dealer;
				this.DoubleDealerIndex = dealerIndex;
				this.params.DoubleDealerId = dealer.value;

				if (this.showApplyStore) {
					this.initStoreDealer(dealer);
				}
			} else if (level == 3) {
				this.StoreDealer = dealer;
				this.StoreDealerIndex = dealerIndex;

				this.params.StoreDealerId = dealer.value;
			}
		},

		resetSearch() {
			this.FirstDealer = {};
			this.FirstDealerIndex = -1;

			this.DoubleDealer = {};
			this.DoubleDealerIndex = -1;
			this.DoubleDealerList = [];

			this.StoreDealer = {};
			this.StoreDealerIndex = -1;
			this.StoreDealerList = [];

			this.params.FirstDealerId = null;
			this.params.DoubleDealerId = null;
			this.params.StoreDealerId = null;
		},

		getFirstDealerList() {
			this.$u.api
				.getDealerDic({
					Level: 1
				})
				.then(res => {
					const { ResultCode, DealerList } = res;
					if (ResultCode === 1) {
						this.FirstDealerList = DealerList;
					}
				});
		},

		initDoubleDealer(dealer) {
			this.DoubleDealer = {};
			this.DoubleDealerIndex = -1;
			this.DoubleDealerList = [];
			this.getDoubleDealerList(dealer.value);
		},

		initStoreDealer(dealer) {
			this.StoreDealer = {};
			this.StoreDealerIndex = -1;
			this.StoreDealerList = [];
			this.getStoreDealerList(dealer.value);
		},

		getDoubleDealerList(parentId) {
			this.$u.api
				.getDealerDic({
					Level: 2,
					ParentId: parentId
				})
				.then(res => {
					const { ResultCode, DealerList } = res;
					if (ResultCode === 1) {
						this.DoubleDealerList = DealerList;
					}
				});
		},

		getStoreDealerList(parentId) {
			this.$u.api
				.getDealerDic({
					Level: 3,
					ParentId: parentId
				})
				.then(res => {
					const { ResultCode, DealerList } = res;
					if (ResultCode === 1) {
						this.StoreDealerList = DealerList;
					}
				});
		}
	}
};
</script>

<style>
page {
	background-color: #f5f5f5;
}
</style>

<style lang="scss" scoped>
.home-wrapper {
	padding-bottom: 60rpx;
}

.basic-wrapper {
	display: flex;
	flex-direction: row;
	height: 150rpx;

	.label {
		display: inline-block;
		width: 90rpx;
		height: 150rpx;
		background: #ff7a23;
		box-shadow: 0 4rpx 5rpx 1rpx rgba(12, 6, 9, 0.07);
		border-radius: 12rpx;

		font-size: 30rpx;
		font-family: NotoSansHans;
		font-weight: 400;
		color: #ffffff;

		writing-mode: tb-rl;
		text-align: center;
		line-height: 90rpx;
	}

	.value {
		flex: 1;
		background: #ffffff;
		box-shadow: 0 4rpx 5rpx 1rpx rgba(12, 6, 9, 0.07);
		border-radius: 12rpx;
		margin-left: 12rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		text {
			font-size: 25rpx;
			font-family: NotoSansHans;
			font-weight: 400;
			color: #2e2f32;
			line-height: 57rpx;
		}
	}
}

.customer,
.information,
.change {
	border-radius: 40rpx;
	padding: 0 10rpx;
	height: 80rpx;
}

.customer {
	background: linear-gradient(110deg, #ed7d7b, #f7c273);
}

.information {
	background: linear-gradient(110deg, #8bd4fc, #69a7fb);
}

.change {
	background: linear-gradient(110deg, #6adac3, #03de7c);
}

.section-item {
	background-color: #ffffff;
	border-radius: 22rpx;
	padding: 0 20rpx;
	align-items: flex-start;

	.circle {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		background-color: #ffffff;
		position: relative;
		top: -60rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.label {
		display: inline-block;
		writing-mode: tb-rl;
		text-align: center;
		font-size: 30rpx;
		font-weight: bold;
		color: #ff7a23;
		position: relative;
		top: -40rpx;
	}
}

.support-wrapper {
	display: flex;
	flex-direction: row;

	.label {
		display: inline-block;
		width: 90rpx;
		background: #ff7a23;
		box-shadow: 0 4rpx 5rpx 1rpx rgba(12, 6, 9, 0.07);
		border-radius: 12rpx;

		font-size: 30rpx;
		font-family: NotoSansHans;
		font-weight: 400;
		color: #ffffff;

		writing-mode: tb-rl;
		text-align: center;
		line-height: 90rpx;
	}

	.value {
		flex: 1;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(2, 150rpx);
		gap: 10rpx;

		.support-item {
			background: #ffffff;
			box-shadow: 0 4rpx 5rpx 1rpx rgba(12, 6, 9, 0.07);
			border-radius: 12rpx;
			margin-left: 12rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.text {
				font-size: 25rpx;
			}
		}
	}
}
</style>
